<template>
  <el-container class="header-wrapper">
    <el-aside class="logo">
      <video id="logo-video" :poster="videoUrl" autoplay muted loop
             playsinline type="video/mp4" :src="videoUrl"></video>
    </el-aside>
    <el-container class="content">
      <el-empty :description="$t('mes.noDataYet')" v-if="!data"/>
      <el-row :gutter="10" style="width: 100%;" v-else>
        <el-col :span="4">
          <process-fieldset :url="icon1" :name="processName" :text-style="{fontSize:'20px'}"
                            :img-style="{height:'75px',marginTop:'10px'}"></process-fieldset>
        </el-col>
        <el-col v-for="(item,index) in data" :key="index" :span="item.span">
          <data-fieldset :title="item.name" :url="item.icon" :value="item.value"
                         :textClass="`color${index+1}`"></data-fieldset>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</template>
<script>
import processFieldset from '@/components/mes/common/processFieldset'
import config from '@/config/index'
import dataFieldset from '@/components/mes/JCLines/dataFieldset'

export default {
  name: 'lineHeader',
  components: { processFieldset, dataFieldset },
  inject: ['productionLineCode'],
  props: {
    processName: {
      type: String,
      default: '-'
    },
    data: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
      icon1: config.ossUrl + '/afl-data-screen/images/icon-screen.png'
    }
  },
  mounted () {
    console.log(this.data)
  }
}
</script>

<style scoped lang="scss">
.header-wrapper {
  height: 100%;
  border-bottom: 3px solid #7952B3;

  .content {
    padding: 10px;
  }
}

.logo {
  width: 300px;
  overflow: hidden;
  /*background: url("@/images/numberBg1.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  /*padding: 0;*/
  /*text-align: center;*/
}

#logo-video {
  width: 250px;
  height: 100%;
  mix-blend-mode: darken;
}
</style>
